<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="6">
                <el-card class="box-card">
                    <el-tree default-expand-all :data="dataTree" :props="defaultProps" @node-click="handleNodeClick"
                        highlight-current v-loading="loading">
                        <span slot-scope="{ node, data }">
                            <i v-if="data.children" class="el-icon-folder tree_icon"></i>
                            <i v-else class="el-icon-document tree_icon"></i>
                            <span style="margin-left: 10px">{{ node.label }}</span>
                        </span>
                    </el-tree>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-card class="box-card">
                    <el-form :inline="true" :model="params" ref="params" class="demo-form-inline sarchForm" size="small"
                        @submit.native.prevent>
                        <el-form-item label="资讯标题">
                            <el-input @keyup.enter.native="handleSubmit" v-model="params.name"
                                placeholder="资讯标题"></el-input>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select v-model="params.status" placeholder="资讯状态">
                                <el-option label="草稿" value="0"></el-option>
                                <el-option label="已发布" value="1"></el-option>
                                <el-option label="下架" value="2"></el-option>
                                <el-option label="待审核" value="3"></el-option>
                                <el-option label="审核通过" value="4"></el-option>
                                <el-option label="驳回" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleSubmit">查询</el-button>
                            <el-button @click="handleReset">重置</el-button>
                            <el-button @click="handleAdd('add', cateInfo)" type="primary"
                                icon="el-icon-plus">新增资讯</el-button>
                            <el-button size="small" @click="batchDelete()" plain type="danger">批量删除</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="small" @click="batchTransfer()" plain type="success">批量转移</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :row-key="getKey" :data="newData" style="width: 100%"
                        :header-cell-style="{ background: '#f0f2f5' }" ref="tableRef" @selection-change="changeSelect">
                        <el-table-column type="selection" width="55" reserve-selection :selectable="judgeSelect">
                        </el-table-column>
                        <el-table-column label="序号" width="48" type="index"></el-table-column>
                        <el-table-column prop="name" label="资讯标题" width="200" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="keyword" label="关键字" width="150" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="description" label="描述" width="150" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="status" label="状态" width="80">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status === '0'">草稿</span>
                                <span v-if="scope.row.status === '1'">已发布</span>
                                <span v-if="scope.row.status === '2'">下架</span>
                                <span v-if="scope.row.status === '3'">待审核</span>
                                <span v-if="scope.row.status === '4'">审核通过</span>
                                <span v-if="scope.row.status === '5'">驳回</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="createTime" width="170" label="创建时间" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="updateTime" label="更新时间" width="170" show-overflow-tooltip>
                        </el-table-column>
                        <!-- <el-table-column prop="opinion" label="审核意见" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span v-if="scope.row.status === '5'">{{ scope.row.opinion }}</span>
                            </template>
                        </el-table-column> -->
                        <el-table-column fixed="right" label="操作" width="220">
                            <template slot-scope="scope">
                                <el-button v-if="cateInfo.cateName === '高新优品'"
                                    @click="handleaDetail(scope.row.id, cateInfo.cateName)" type="text"
                                    size="small">查看详情</el-button>
                                <el-button v-if="cateInfo.cateName !== '高新优品'" @click="handleDetail(scope.row.id)"
                                    type="text" size="small">查看详情</el-button>
                                <el-button
                                    :disabled="scope.row.status === '1' || scope.row.status === '3' || scope.row.status === '4'"
                                    @click="handleEdit('edit', cateInfo, scope.row)" type="text" size="small">编辑</el-button>
                                <el-button
                                    :disabled="scope.row.status === '1' || scope.row.status === '3' || scope.row.status === '4'"
                                    @click="hanldeDelete(scope.row.id)" type="text" size="small">删除</el-button>
                                <el-button
                                    :disabled="scope.row.status === '1' || scope.row.status === '3' || scope.row.status === '4'"
                                    @click="handleSend(scope.row)" type="text" size="small">发布</el-button>
                                <el-button
                                    :disabled="scope.row.status === '0' || scope.row.status === '2' || scope.row.status === '3' || scope.row.status === '5'"
                                    @click="handleLower(scope.row)" type="text" size="small">下架</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="poolPage">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="params.pageNumber" :page-sizes="[10, 20, 30]" :page-size="params.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 新增资讯 -->
        <NewDialog @getNewList="getNewList" ref="newCon" />
        <!-- 详情 -->
        <!-- <RenovationDetail ref="detailContent" /> -->
        <el-dialog title="选择栏目" :visible.sync="dialogVisible" width="30%">
            <div class="treeWrapper">
                <el-tree ref="tree" class="treeRadio" default-expand-all :props="defaultPropsSelect" :data="dataTree"
                    show-checkbox check-strictly node-key="id" @check="handleClick" @check-change="handleClickChange" />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleTo()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {
    getColumnTree2,
    getColumnList,
    getNewDelete,
    getNewOptions,
    getNewDetail,
    transferNews
} from "@/request/api/new";
import NewDialog from "./newDialog.vue";

export default {
    components: {
        NewDialog,
    },
    data() {
        return {
            dataTree: [],
            defaultProps: {
                children: "children",
                label: "name",
            },
            defaultPropsSelect: {
                children: "children",
                label: "name",
            },
            selectCate: {
                checkStrictly: true,
                label: "name",
                children: "children",
                value: "id",
                getCheckedNodes: true,
                expandTrigger: "hover",
            },
            isEdit: false,
            loading: true,
            params: {
                page: 1,
                pageSize: 10,
                ntCtgId: null, //栏目id
                name: "", //标题
                status: "", //状态
            },
            newData: [],
            cateInfo: {
                cateId: "", //栏目id
                cateName: "", //栏目名称
            },
            total: 0,
            multipleSelection: [], //批量选择
            dialogVisible: false,
        };
    },
    created() {
        this.getTypeTree();
        this.getNewList();
        // this.getNewList(this.cateInfo.cateId)
    },
    methods: {
        // 获取产品类型树
        getTypeTree() {
            getColumnTree2().then((res) => {
                if (res.data.code === 200) {
                    this.loading = false;
                    this.dataTree = res.data.result;
                }
            });
        },
        // 父级
        selectValue() {
            this.$refs.cascader.dropDownVisible = false;
        },
        // 查看详情
        handleDetail(id) {
            let url = this.$router.resolve({
                name: "newDetail",
                query: {
                    id,
                    type:'审核'
                },
            });
            window.open(url.href, "_blank");
        },

        handleaDetail(id, name) {
            let url = this.$router.resolve({
                name: "newDetail",
                query: {
                    id,
                    name,
                    
                },
            });
            window.open(url.href, "_blank");
        },
        // 点击左侧树获取信息
        handleNodeClick(data) {
            if (data.children) {
                this.$message({
                    message: "不可选择父级栏目进行新增资讯！",
                    type: "warning",
                });
                this.cateInfo.cateId = "";
                this.cateInfo.cateName = "";
                this.params.ntCtgId = "";
            } else {
                this.cateInfo.cateId = data.id;
                this.cateInfo.cateName = data.name;
                this.params.ntCtgId = data.id;
                this.getNewList(data.id);
            }
        },
        // 获取新闻列表
        getNewList() {
            getColumnList(this.params).then((res) => {
                if (res.data.code === 200) {
                    this.newData = res.data.result.items;
                    this.total = res.data.result.total;
                }
            });
        },
        // 新增资讯
        handleAdd(type, cateInfo) {
            this.$refs.newCon.open(type, cateInfo);
            // if (this.cateInfo.cateId) {
            //     this.$refs.newCon.open(type, cateInfo);
            // } else {
            //     this.$message({
            //         message: "请选择栏目！",
            //         type: "warning",
            //     });
            // }
        },
        // 编辑
        handleEdit(type, cateInfo, info) {
            this.$refs.newCon.open(type, cateInfo, info);
        },
        // 删除
        hanldeDelete(id) {
            this.$confirm("确定删除该条信息吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.getDelete(id);
            });
        },
        // 删除接口
        getDelete(id) {
            getNewDelete(id).then((res) => {
                if (res.data.code === 200) {
                    this.$message({
                        message: res.data.message,
                        type: "success",
                    });
                    this.getNewList();
                    this.$refs.tableRef.clearSelection();
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        // 选择左侧复选框
        changeSelect(val) {
            this.multipleSelection = val;
        },
        getKey(row) {
            return row.id;
        },
        // 批量删除
        batchDelete() {
            if (this.multipleSelection.length === 0) {
                this.$message({
                    message: "请选择数据！",
                    type: "warning",
                });
                return false;
            }
            this.$confirm("确定删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                var ids = this.multipleSelection.map((item) => item.id);
                this.getDelete(ids);
            });
        },
        // 查询
        handleSubmit() {
            this.params.page = 1;
            this.getNewList(this.cateInfo.cateId);
        },
        // 重置
        handleReset() {
            this.params.page = 1;
            this.params.name = null;
            this.params.status = null;
            this.getNewList(this.cateInfo.cateId);
        },
        handleSizeChange(val) {
            this.params.pageSize = val;
            this.params.page = 1;
            this.getNewList(this.cateInfo.cateId);
        },
        handleCurrentChange(val) {
            this.params.page = val;
            this.getNewList(this.cateInfo.cateId);
        },
        // 发布
        handleSend(info) {
            this.$confirm("确定发布该资讯吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                getNewDetail(info.id).then((res) => {
                    if (res.data.code === 200) {
                        var params = res.data.result;
                        params.status = "1";
                        this.getAdd(params);
                    }
                });
            });
        },
        // 下架
        handleLower(info) {
            this.$confirm("确定下架该资讯吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                getNewDetail(info.id).then((res) => {
                    if (res.data.code === 200) {
                        var params = res.data.result;
                        params.status = "2";
                        this.getAdd(params);
                    }
                });
            });
        },
        // 修改接口
        getAdd(params) {
            getNewOptions(params).then((res) => {
                if (res.data.code === 200) {
                    this.$message({
                        message: res.data.message,
                        type: "success",
                    });
                    // this.dialogVisible = false
                    this.getNewList();
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        // 判断表格每一行的 CheckBox 是否可以勾选
        judgeSelect(row, index) {
            return row.status == "0" || row.status == "5" || row.status == "2"; // 返回true该行可选，返回false则不可选
        },
        // 批量转移
        batchTransfer() {
            if (this.multipleSelection.length === 0) {
                this.$message({
                    message: "请选择数据！",
                    type: "warning",
                });
                return false;
            }
            this.dialogVisible = true;
            this.$refs.tree.setCheckedKeys([]);
        },
        handleClickChange(data, check, childCheck) {
            if (check) {
                this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
            }
        },
        handleClick(data, tree) {
            this.$refs.tree.setCheckedKeys([]); // 删除所有选中节点
            this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
        },
        // 转移栏目-点击确定
        handleTo() {
            var columnData = this.$refs.tree.getCheckedNodes();
            if (columnData.length === 0) {
                this.$message({
                    message: '请选择栏目！',
                    type: 'warning'
                });
                return false;
            } else {
                var newData = []
                this.multipleSelection.forEach(item => {
                    newData.push({
                        id: item.id,//资讯id
                        ntCtgId: columnData[0].id,//栏目id
                        columnName: columnData[0].name//栏目名称
                    })
                })
                transferNews(newData).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: res.data.message,
                            type: "success",
                        });
                        this.dialogVisible = false
                        this.getNewList();
                        this.$refs.tableRef.clearSelection();
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            }

        }
    },
};
</script>
<style lang="less" scoped>
.el-card {
    overflow-y: auto;
    // height: 830px;
}

.bigBtn {
    width: 140px;
}

.tree_icon {
    color: #67c23a;
}

.poolPage {
    margin-top: 15px;
    text-align: right;
}

/deep/.treeRadio .el-checkbox__inner {
    border-radius: 50%;
}

/deep/ .el-tree {
    padding-top: 15px;
    padding-left: 10px;

    // 不可全选样式
    .el-tree-node {
        .is-leaf+.el-checkbox .el-checkbox__inner {
            display: inline-block;
        }

        .el-checkbox .el-checkbox__inner {
            display: none;
        }
    }
}

.treeWrapper {
    height: 600px;
    overflow-y: auto;
}
</style>

